<template>
  <div class="dicount" style="margin-top: 8vh">
    <van-tabs v-model:active="active" sticky>
      <van-tab v-for="index in 2" :title="title[index]">
        <van-config-provider :theme-vars="themeVars">
          <van-card
            v-for="item in homeData.list3"
            :key="item.id"
            :price="formatMoney(item.price)"
            :title="item.title"
            :thumb="homeData.image4"
            :origin-price="399"
            :tag="tag[index]"
          >
            <template #num>
              <span> {{ item.num }} 人正在学习</span>
            </template>
            <template #tags>
              <van-tag plain type="danger" style="margin-top: 2vh"
                >限时优惠</van-tag
              >
            </template>
          </van-card>
        </van-config-provider>
      </van-tab>
    </van-tabs>
    <van-divider
      :style="{ color: '#cccccc', borderColor: '#cccccc', padding: '0 16px' }"
    >
      我是有底线的
    </van-divider>
  </div>
</template>

<script>
import { Divider } from 'vant'
import axios from 'axios'

export default {
  name: 'Dicount',
  data() {
    return {
      active: 0,
      homeData: {},
      title: ['', '最热', '最新'],
      tag: ['', '', '最新'],
      themeVars: {
        cardThumbSize: '15vh',
        carTextSize: '2vh',
        cardPriceColor: '#ffc71c',
        cardTitleFontSize: '2vh',
        cardBackgroundColor: '#fff',
        navBarTitleFontWeight: 'bolder',
      },
    }
  },
  components: {
    Divider,
  },
  created() {
    axios
      .get('/mock/api/home/list')
      .then((mockData) => {
        this.homeData = mockData.data.data
      })
      .catch(console.error)
  },

  methods: {
    formatMoney(val) {
      return Number(val).toFixed(1)
    },
  },
}
</script>

<style lang="less" scoped>
:deep(.van-card__title) {
  font-weight: bolder;
  font-size: 1.8vh;
}
</style>
